import React, { useEffect, useState } from 'react';
import { Drawer, Form, Input, Upload, Radio, InputNumber, Space, Button, message, Popconfirm } from 'antd';
import ComTreeSelect from '../Com/ComTreeSelect';
import ServerTree from '../Com/SeverTree';
import ComUpload from '../../../components/ComUpload';
import { addProduct, updateProduct } from '../../../apis/Product';
// import { useDispatch, useSelector } from 'react-redux';
// import { allServer } from '../../redux/server/serverThunk';


type Props = {
    closeModal: (closeType?: string) => void,
    updateCol: any
}

const AddAndUpdate = ({ closeModal, updateCol }: Props) => {

    const [form] = Form.useForm();
    const [goodstypeId, steGoodstypeId] = useState<any>();
    const [serviceTypeId, setServerTypeId] = useState<any>();
    const [photo, setPhoto] = useState<string>()
    const [title, setTitle] = useState('')
    const [radioValue, setRadioValue] = useState<number | null>(null)


    useEffect(() => {
        console.log('updateCol :>> ', updateCol);
        if (updateCol) {
            setTitle('修改')
            form.setFieldsValue(updateCol)
            setServerTypeId(updateCol.service_type_id)
            steGoodstypeId(updateCol.goods_type_id)
            setPhoto(updateCol.photo)
            const radio = parseInt(updateCol.status)
            setRadioValue(radio)
        } else {
            setTitle('新增')
        }

    }, [updateCol])

    const changeGoodsId = (id: string) => {
        steGoodstypeId(id)
    }
    const changeServerId = (id: string) => {
        setServerTypeId(id)
    }


    const submitDate = async () => {
        const formData = form.getFieldsValue()

        if (updateCol) {
            const data = { ...formData, goodstypeId, serviceTypeId, photo, id: updateCol.id }
            for (const key in data) {
                if (!data[key]) {
                    message.error(`请填写${key}`)
                    return
                }
            }
            await updateProduct(data)
        } else {
            const data = { ...formData, goodstypeId, serviceTypeId, photo }
            for (const key in data) {
                if (!data[key]) {
                    message.error(`请填写${key}`)
                    return
                }
            }
            await addProduct(data)
        }
        closeModal('sub')
    }

    //修改图片
    const changePhoto = (url: any) => {
        setPhoto(url)
    }
    //切换状态
    const changeRadio = (e: any) => {
        setRadioValue(e.target.value)
    }

    //取消提示框
    const confirm = () => {
        closeModal()
    };


    return (
        <>
            <Drawer title={title}
                open={true}
                closable={false}
                footer={
                    <Space>
                        <Popconfirm
                            title="确定放弃编辑?"
                            onConfirm={confirm}
                            okText="确定"
                            cancelText="取消"
                        >
                            <Button>取消</Button>
                        </Popconfirm>
                        <Button type="primary" onClick={submitDate}>
                            提交
                        </Button>
                    </Space>
                }
                footerStyle={{ textAlign: 'right' }}>
                <Form
                    name="basic"
                    labelCol={{ span: 8 }}
                    wrapperCol={{ span: 16 }}
                    form={form}
                    style={{ maxWidth: 600 }}
                    initialValues={{ remember: true }}
                    autoComplete="off"
                >
                    <Form.Item label="商品名称" name="name"
                        wrapperCol={{ span: 11 }}
                        rules={[{ required: true, message: '请输入商品名!' }]}>
                        <Input type='text' />
                    </Form.Item>

                    <Form.Item
                        label="商品类型"
                        name="goodstypeId"
                        style={{ width: '300px' }}
                        rules={[{ required: true, message: '请输入商品类型!' }]}
                    >
                        <ComTreeSelect changeGoodsId={changeGoodsId} goodstypeId={goodstypeId}></ComTreeSelect>
                    </Form.Item>

                    <Form.Item
                        label="服务类型"
                        name="serviceTypeId"
                        style={{ width: '300px' }}
                    >
                        <ServerTree changeServerId={changeServerId} serviceTypeId={serviceTypeId}></ServerTree>
                    </Form.Item>

                    <Form.Item label="描述" name="gname"
                        wrapperCol={{ span: 11 }}>
                        <Input type='text' />
                    </Form.Item>

                    <Form.Item label="价格" name="price"
                        wrapperCol={{ span: 11 }}
                        rules={[{ required: true }]}>
                        <InputNumber />
                    </Form.Item>

                    <Form.Item label="数量" name="counts"
                        wrapperCol={{ span: 11 }}
                        rules={[{ required: true }]}>
                        <InputNumber />
                    </Form.Item>

                    <Form.Item label="状态" name="status"
                        wrapperCol={{ span: 11 }}
                        rules={[{ required: true }]}>
                        <Radio.Group value={radioValue} onChange={changeRadio}>
                            <Radio value={1}> 上架 </Radio>
                            <Radio value={2}> 下架 </Radio>
                        </Radio.Group>
                    </Form.Item>

                    <Form.Item label="商品图片" name="photo"
                        wrapperCol={{ span: 11 }}
                        rules={[{ required: true }]}>
                        <ComUpload changePhoto={changePhoto} photo={photo}></ComUpload>
                    </Form.Item>

                </Form>
            </Drawer>
        </>
    );
};

export default AddAndUpdate;
